<template>
  <div>
    <homeHeader />
    <!-- 通过sticky属性可以开启粘性布局，粘性布局下，当 Tab 滚动到顶部时会自动吸顶 -->
    <!-- 通过swipeable属性可以开启滑动切换标签页 -->
    <van-tabs v-model="active" sticky swipeable>
      <van-tab :title="element.name" v-for="(element,index) of tabList" :key="index">
        <van-list v-model="loading" :finished="element.finished" finished-text="没有更多了" @load="loadMorePost" :immediate-check="false">
        <post :item="post" v-for="(post,index) in element.posts" :key="index" />
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import homeHeader from "../components/homeHeader";
import post from "../components/post";
export default {
  name:'homepage',

  components: {
    homeHeader,
    post
  },
  data() {
    return {
      // 这里可以控制当前显示选项
      // 如果有登陆的话,第一个分类是关注,头条的 index == 1
      // 如果没登录第一个分类就是头条,它的 index == 0
      // 获取 token 就可以判断有没有登陆,设置一个默认激活的当前分类
      active: localStorage.getItem("token") ? 1 : 0,
      tabList: [],
      loading: false,
      pageSize: 6,
   
    };
  },
  methods: {
    // 封装获取首页获取tab栏的数据
    initTabList() {
      if (localStorage.getItem('tabActive') && localStorage.getItem("token")) {
                const data = JSON.parse(localStorage.getItem('tabActive'));
                 // 循环遍历头部导航的数组，在每一个导航里面添加一个空数组，用来接受里面每一个导航里面的数据
        data.forEach(element => {
          element.posts = [];
          // 设置当前页数
          element.currentfPage=1;
          // 设置每一项是否已加载完成，加载完成后不再触发
          element.finished = false;

        });
        // 将获取的数据放到我们的data 当中
        this.tabList = data;
        // console.log(this.tabList);
        // 调用获取导航里面数据的方法渲染默认导航数据，发送axios,传入参数this.active是渲染默认当前导航的数据
        this.getTabPosts(this.active);
      }else{

        this.$axios({
          url: "/category",
          mounted: "get"
        }).then(res => {
          // 解构出里面所需要的数据
          const { data } = res.data;
          // 循环遍历头部导航的数组，在每一个导航里面添加一个空数组，用来接受里面每一个导航里面的数据
          data.forEach(element => {
            element.posts = [];
            // 设置当前页数
            element.currentfPage=1;
            // 设置每一项是否已加载完成，加载完成后不再触发
            element.finished = false;
  
          });
          // 将获取的数据放到我们的data 当中
          this.tabList = data;
          // console.log(this.tabList);
          // 调用获取导航里面数据的方法渲染默认导航数据，发送axios,传入参数this.active是渲染默认当前导航的数据
          this.getTabPosts(this.active);
        });
      }
    },
    // 发送axios，可以获取栏目里的数据，传入一个导航头的一个索引值，
    getTabPosts(tabPostsIndex) {
      //  创建一个变量接收当前的栏目id
      const categoryId = this.tabList[tabPostsIndex].id;
      // 发送阿贾克斯获取当前栏目的数据
      this.$axios({
        url: "/post",
        mounted: "get",
        // 如果是 get 请求可以使用 params 的属性来带参数
        params: {
          category: categoryId,
          pageIndex: this.tabList[tabPostsIndex].currentfPage,
          pageSize : this.pageSize
        }
      }).then(res => {
        const { data } = res.data;
        // console.log(this.tabList[tabPostsIndex].posts)
        // console.log(this.tabList[tabPostsIndex].currentfPage)
        // 使用 es6 解构语法拼接数据,合并数组
        const newData = [...this.tabList[tabPostsIndex].posts,...data]
        // 把该栏目的数据对应放到对应的每一项里
        this.tabList[tabPostsIndex].posts = newData;
         // 这个时候数据获取完毕了,我们要手动将读取状态 this.loading 设置为 false;
          // 可以隐藏掉加载中那几个字，隐藏加载这几个字
        this.loading = false;
        // console.log(this.tabList)
        // 如果新获取的 data 数据长度 少于我们设置的 每页数据条数
        // 那么就是说我们已经翻到最后一页了,
        // 就要将当前 tab 分类下面记录的那个 finished 设置为 true，以免再触发加载函数;
        if(data.length < this.pageSize){
           // 将当前 tab 的 finished 属性修改为 true 
            // 避免下一次的继续触发加载函数loadMorePost
            this.tabList[tabPostsIndex].finished = true;
            // console.log(this.tabList[tabPostsIndex])
        }
        // console.log(this.tabList[tabPostsIndex].posts)
      });
    },
    //触底的话触发事件
     loadMorePost(){
  //   console.log('触发了分页');
  //  setTimeout(()=>{
    // 页数自动加一
      this.tabList[this.active].currentfPage += 1;
      // 发送axios
    this.getTabPosts(this.active);
  //  },4000)

  }
  },
 
  mounted() {
    console.log(this.userId)
    // 挂载完毕，发送阿贾克斯，渲染栏目和默认栏目的数据
    this.initTabList();
  },
  watch: {
    // 监听当前激活分类 active 的变化, 重新拉取文章数据
    active(newActiveTab) {
      // console.log(newActiveTab)
      // 这里是每次切换 tab 都会触发 ajax 请求
      // 问题在于我们对于那些已经请求过数据,有了 posts 的分类是不需要这个重新请求的
      if (this.tabList[newActiveTab].posts.length == 0) {
        // 如果这个被选中的 tabIndex 对应哪个 tab 对象里面的 posts 长度为 0
        // 证明没有数据,于是发送请求,不然就不去管
        this.getTabPosts(newActiveTab);
      }
     

    }
   
  },
  activated(){
    this.initTabList();
  }
 
};
</script>

<style>
</style>